import React, { useState, useEffect } from 'react'
import { Tabs, Button } from 'react-vant'
import axios from "../../uilst/axios"
import { useNavigate } from "react-router-dom"
type Props = {}

const OrderForGoods = (props: Props) => {
  // 全部
  const [list, setlist] = useState([])
  // 待出行
  const [Travellist, setTravellist] = useState([])
  // 退款/已取消
  const [cancellation, setcancellation] = useState([])
  // 待支付
  const [payment, setpayment] = useState([])
  const navigate = useNavigate()
  useEffect(() => {
    axios.get('/goods').then(res => {
      setlist(res.data)
    })
  }, []);
  setTimeout(() => {
    const getTravellist = list.filter((item: any) => {
      return item.teg === '出票成功'
    })
    setTravellist(getTravellist)
    const getcancellation = list.filter((item: any) => {
      return item.teg === '退款成功' || item.teg === '已取消'
    })
    setcancellation(getcancellation)
    const getpayment = list.filter((item: any) => {
      return item.teg === '待支付'
    })
    setpayment(getpayment)
  }, 500);
  return (
    <div className='OrderForGoods'>
      <header>全部订单</header>
      <main>
        <div className='demo-tabs'>
          <Tabs defaultActive={0}>
            <Tabs.TabPane title='全部'>
              {
                list.map((item: any, index) => {
                  return <div className='allcon' key={index} onClick={() => navigate("/detail/" + item.id, { state: item })}>
                    <div className='allconlet'>
                      <h4>{item.title}</h4>
                      <p>{item.name}{item.number}</p>
                      <p>{item.date}</p>
                    </div>
                    <div className='allconrig'>
                      <h4>￥{item.price}</h4>
                      <p className={item.teg === '出票成功' ? "success" : item.teg === "退款成功" || item.teg === "已取消" ? "" : "fail"}>{item.teg}</p>
                      <Button plain hairline type='primary' color='#666666' style={{ height: '30px', borderRadius: '2s0px' }}>
                        删除订单
                      </Button>
                    </div>
                  </div>
                })
              }
            </Tabs.TabPane>
            <Tabs.TabPane title='待出行'>
              {
                Travellist ? Travellist.map((item: any, index) => {
                  return <div className='allcon' key={index} onClick={() => navigate("/detail/" + item.id, { state: item })}>
                    <div className='allconlet'>
                      <h4>{item.title}</h4>
                      <p>{item.name}{item.number}</p>
                      <p>{item.date}</p>
                    </div>
                    <div className='allconrig'>
                      <h4>￥{item.price}</h4>
                      <p className={item.teg === '出票成功' ? "success" : item.teg === "退款成功" || item.teg === "已取消" ? "" : "fail"}>{item.teg}</p>
                      <Button plain hairline type='primary' color='#666666' style={{ height: '30px', borderRadius: '2s0px' }}>
                        删除订单
                      </Button>
                    </div>
                  </div>
                }) : "暂无数据"
              }
            </Tabs.TabPane>
            <Tabs.TabPane title='待支付'>
              {
                payment.map((item: any, index) => {
                  return <div className='allcon' key={index} onClick={() => navigate("/detail/" + item.id, { state: item })}>
                    <div className='allconlet'>
                      <h4>{item.title}</h4>
                      <p>{item.name}{item.number}</p>
                      <p>{item.date}</p>
                    </div>
                    <div className='allconrig'>
                      <h4>￥{item.price}</h4>
                      <p className={item.teg === '出票成功' ? "success" : item.teg === "退款成功" || item.teg === "已取消" ? "" : "fail"}>{item.teg}</p>
                      <Button plain hairline type='primary' color='#666666' style={{ height: '30px', borderRadius: '2s0px' }}>
                        删除订单
                      </Button>
                    </div>
                  </div>
                })
              }
            </Tabs.TabPane>
            <Tabs.TabPane title='退款/已取消'>
              {
                cancellation.map((item: any, index) => {
                  return <div className='allcon' key={index} onClick={() => navigate("/detail/" + item.id, { state: item })}>
                    <div className='allconlet'>
                      <h4>{item.title}</h4>
                      <p>{item.name}{item.number}</p>
                      <p>{item.date}</p>
                    </div>
                    <div className='allconrig'>
                      <h4>￥{item.price}</h4>
                      <p className={item.teg === '出票成功' ? "success" : "fail" && item.teg === "退款成功" || item.teg === "已取消" ? "" : "fail"}>{item.teg}</p>
                      <Button plain hairline type='primary' color='#666666' style={{ height: '30px', borderRadius: '2s0px' }}>
                        删除订单
                      </Button>
                    </div>
                  </div>
                })
              }
            </Tabs.TabPane>
          </Tabs>
        </div>
      </main>
    </div>
  )
}

export default OrderForGoods